<template>
  <section class="feed-back">
    <div class="feedback-inner">
      <div class="text-input">
        <x-textarea :placeholder="$t('feedback-area')" :rows="5" v-model="msg"></x-textarea>
      </div>
      <div class="puload-img">
        <p>{{$t('feeback upload')}}</p>
        <ul class="img">
          <li v-for="(i, k) in imglist" :key="k">
            <div class="image-box">
              <x-icon type="ios-close-outline" class="close-btn" size="30" @click.native="deleteImg(k)"></x-icon>
              <img :src="i" alt="default">
            </div>
          </li>
          <li>
            <div class="image-box">
              <img src="../../assets/img/add-btn.png" class="add-btn" alt="add-btn">
              <input class="add-img" type="file" accept="image/*" @change="uploadAvatar($event)">
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div>
      <x-button class="btn" @click.native="doSubmit"> {{$t('submit feedback')}}</x-button>
    </div>
  </section>
</template>

<i18n>
  title.feedback:
    en: Feedback
    zh-CN: 反馈信息
  feedback-area:
    en: Massage
    zh-CN: 请详细输入遇到的问题
  submit feedback:
    en: Submit Info
    zh-CN: 提交反馈
  feedback sucess:
    en: Feedback Sucess
    zh-CN: 反馈成功
  feeback upload:
    en: UpLoad Images
    zh-CN: 上传图片
</i18n>

<script>
  import {XTextarea, XButton} from 'vux'
  export default {
    name: 'Feedback',
    components: {
      XButton,
      XTextarea
    },
    data () {
      return {
        msg: '',
        imglist: []
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
      },
      deleteImg (key) {
        this.imglist.splice(key, 1)
      },
      uploadAvatar (e) {
        let file = e.target.files[0]
        let form = new FormData()
        let vue = this
        console.log(e.target.files[0])
        form.append('file', file)
        form.append('token', localStorage.token)
        vue.$vux.loading.show({
          text: '加载中...'
        })
        this.$http.post('/api/common/upload', form, {'Content-Type': 'multipart/form-data'})
          .then(({data}) => {
            vue.$vux.loading.hide()
            console.log(data)
            if (data.code === 0) {
              vue.$vux.toast.show({
                text: `上传失败`,
                type: 'text'
              })
            } else if (data.code === 1) {
              vue.imglist.push(data.data.url)
            }
          })
      },
      doSubmit () {
        let vm = this
        if (!vm.msg) {
          vm.$vux.toast.show({
            text: `修改成功`
          })
          return
        }
        let param = {
          images: vm.imglist.length === 0 ? '' : vm.imglist.join(','),
          content: vm.msg,
          token: localStorage.token
        }
        console.log(param)
        vm.post({
          url: `/api/service/sendquestion`,
          params: param,
          success: function (data) {
            console.log(data)
            if (data.code === 0) {
              vm.$vux.toast.show({
                text: data.msg,
                type: 'text'
              })
            } else if (data.code === 1) {
              vm.$vux.toast.show({
                text: vm.$t('feedback sucess'),
                type: 'text'
              })
              vm.$router.back(-1)
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .vux-x-icon {
    fill: #333;
  }
  .feed-back {
    height: 100%;
    background-color: #f1f1f1;
    .feedback-inner{
      padding: .2rem;
      font-size: .3rem;
      .text-input{
        background-color: #fff;
      }
      .puload-img {
        padding: .2rem .3rem;
        background-color: #fff;
        border-top: 1px solid #dfdfdf;
        .img {
          list-style: none;
          display: flex;
          flex-wrap: wrap;
          margin-top: .2rem;
          li{
            width: 1.8rem;
            margin-right: .25rem;
            margin-bottom: .1rem;
            .image-box {
              width: 100%;
              height: 1.8rem;
              line-height: 1;
              position: relative;
              .close-btn {
                position: absolute;
                right: -12px;
                top: -10px;
              }
              img {
                width: 1.8rem;
                height: 1.8rem;
              }
              .add-btn {
                position: absolute;
                left: 0;
                top: 0;
              }
              .add-img {
                width: 100%;
                height: 100%;
                display: inline-block;
                opacity: 0;
                z-index: 2;
              }
            }
          }
        }
      }
    }
  }
  .btn{
    width: 6.7rem;
    background-color: #537fbf;
    color: #ffffff;
    font-size: .28rem;
    margin: 0 auto;
  }
</style>
